import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from "@fullcalendar/interaction"
import timeGridPlugin from "@fullcalendar/timegrid"
import "./index.scss"
import dayjs from "dayjs";
import calendar from 'chinese-workday'

export default function Calendar() {
  const handleDateClick = (arg) => {
    console.log(arg)
  }

  return (
    <div className="calerdar-con">
      <FullCalendar
        plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
        locale='zh-cn'
        buttonText={{
          today: '今天'
        }}
        initialView="dayGridMonth"
        dateClick={handleDateClick}
        dayCellContent={Cell}
      />
    </div>
  )
}

function Cell(day) {
  // console.log(day)
  const cur = dayjs(day.date).format('YYYY-MM-DD')
  const isHoliday = calendar.isHoliday(cur)
  const festival = calendar.getFestival(cur)
  console.log(cur, isHoliday, calendar.isAddtionalWorkday(cur), festival)
  return (
    <div>
      {
        isHoliday ? festival : ''
      }
      <span>{day.dayNumberText}</span>
    </div>
  )
}
